<!DOCTYPE html>
<html>
<head>
	<!-- 设置浏览器不缓存 -->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
	<!-- Content-Type -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!-- Favicon -->
	<link rel="shortcut icon" href="./images/logo.png">
	<title>企业服务共享中心-业务统计</title>
	<!--stylesheets-->
	<link rel="stylesheet" href="./plugins/element/index.css">
	<script src="./plugins/vue/vue.js"></script>
	<script src="./plugins/element/index.js"></script>
	<script src="./plugins/axios/axios.min.js"></script>
	<script src="./js/common/public.js?v=0.8.0.3"></script>
	<!-- 自定义样式表 -->
	<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
</head>
<body>
<div id="app">
<template>
<el-container class="maincontainer">
	<el-container class="submaincontainer">
		<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
		  <div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
			<el-form :model="queryForm" :rules="queryRules" ref="queryForm" >
					<el-form-item label="部门" prop="dept">
						<el-select @change="getLeader" v-model="queryForm.dept" multiple placeholder="默认全部" filterable>
						  <el-option
							v-for="item in depts"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						  </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="团队" prop="team">
						<el-select @change="getPersonnel" v-model="queryForm.team" multiple placeholder="默认全部" filterable>
							<el-option-group
							  v-for="group in teams"
							  :key="group.deptname"
							  :label="group.deptname">
							  <el-option
								v-for="item in group.users"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
					<el-form-item label="人员" prop="personnel">
						<el-select v-model="queryForm.personnel" multiple placeholder="默认全部" filterable>
							<el-option-group
							  v-for="group in personnels"
							  :key="group.deptname"
							  :label="group.deptname">
							  <el-option
								v-for="item in group.users"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
					<el-form-item label="日期范围" prop="date" >
						<el-date-picker style="width:235px"
							value-format="yyyy-MM-dd"
							  v-model="queryForm.date"
							  type="daterange"
							  width="100"
							  align="right"
							  unlink-panels
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							  :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				  <el-form-item>
					<el-button size="small" type="primary" @click.native.prevent="start" style="position:fixed;left:20px;bottom:5px;">查询</el-button>
				  </el-form-item>
			</el-form>
		  </div>
		</el-card>
		<el-card class="box-card" style="width:100%" shadow="never">
		  <div slot="header" class="clearfix">
		  <i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
			<span>业务统计</span>
		  </div>
		  <div>
			  <el-table
				border
				show-summary
				ref="multipleTable"
				:data="pagedata"
				tooltip-effect="dark"
				:height="tableHeight"
				style="width: 100%;">
				<el-table-column
				v-for="column in tablecolums"
				:fixed = "column.fixed"
				  v-bind:prop="column.prop"
				  v-bind:label="column.label"
				  v-bind:min-width="column.width"
				  show-overflow-tooltip>
				</el-table-column>
				<el-table-column
				  prop="balance"
				  label="尾款金额"
				  min-width="50">
				  <template slot-scope="scope">
					  <el-tooltip class="item" effect="dark" :content="scope.row.blancecondtion" placement="top">
							<el-link type="primary">{{scope.row.balance}}</el-link>
					  </el-tooltip>
				  </template>
				</el-table-column>
				<el-table-column
				  prop="memo"
				  label="备注"
				  min-width="50">
				  <template slot-scope="scope">
						<el-popover
						  placement="right"
						  width="350"
						  trigger="hover">
						  <el-table :data="scope.row.memodata" height="500">
						    <el-table-column width="250" property="memo" label="备注"></el-table-column>
						    <el-table-column width="100" property="count" label="数量"></el-table-column>
						  </el-table>
							<el-link type="primary" slot="reference" v-show="scope.row.memodata.length > 0">预览</el-link>
						</el-popover>
					  </template>
				</el-table-column>
			  </el-table>
		  </div>
		</el-card>
	</el-container>
</el-container>
</template>
</div>
</body>

<script src="./js/ststitrack.js?v=0.8.0.3"></script>

</script>	
</html>
